import { computed } from 'vue';
import { useLoginModalStore } from '@/store/loginModal';
import type { LoginModalActions } from '@/types/login';

/**
 * 登录弹窗控制 composable
 * 提供便捷的弹窗控制方法
 */
export function useLoginModal() {
  const store = useLoginModalStore();

  // 计算属性
  const isVisible = computed(() => store.visible);
  const isLoading = computed(() => store.loading);

  // 方法
  const showModal: LoginModalActions['showModal'] = (callback) => {
    store.showModal(callback);
  };

  const hideModal: LoginModalActions['hideModal'] = () => {
    store.hideModal();
  };

  const toggleModal = () => {
    if (store.visible) {
      store.hideModal();
    } else {
      store.showModal();
    }
  };

  return {
    // 状态
    isVisible,
    isLoading,
    // 方法
    showModal,
    hideModal,
    toggleModal,
  };
}
